<template>
  <div id="examination" style="width: 100%; height: 100%"></div>
</template>

<script>
import echarts from "echarts";
import request from "@/utils/request";
export default {
  name: "student",
  data() {
    return {
      list: [],
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      request({
        url: `/api/portal/getks/kslist?organizeId=${this.$store.getters.organizeId}`,
        method: "post"
      }).then(res => {
        let xData = res.data.dateList
          .map(item => (item = item.slice(5, item.length)))
          .reverse(); //日期
        let legendData = ["考试人数", "通过人数"]; //图例
        let thirdIndustry = res.data.ksList.reverse(); //考试人数
        let totalStudent = res.data.tgksList.reverse(); //通过人数
        let option = {
          // backgroundColor:"#061740",
          title: {
            text: "考试总览",
            textStyle: {
              color: "#8c88a1"
            }
          },
          grid: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 0,
            top: "20%",
            left: "3%",
            right: "3%",
            bottom: "5%",
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999"
              }
            }
          },
          legend: {
            orient: "horizontal",
            left: "center",
            top: "top",
            padding: [20, 0, 0, 0],
            data: legendData,
            //图例滚动
            // type: 'scroll',
            //图例文字样式
            textStyle: {
              color: "#8c88a1",
              fontSize: "1rem"
            }
          },
          xAxis: [
            {
              type: "category",
              axisTick: {
                show: false
              },
              interval: 1,
              axisLabel: {
                color: "rgba(36, 173, 254, 1)",
                fontSize: "1rem"
              },
              axisLine: {
                show: false
              },
              data: xData
            }
          ],
          yAxis: [
            {
              type: "value",
              name: "",
              // min: 0,
              // max: 100,
              // interval: 20,
              axisLabel: {
                formatter: "{value} "
              },
              axisLabel: {
                textStyle: {
                  //坐标轴颜色
                  color: "rgba(36, 173, 254, 1)",
                  fontSize: "1rem"
                }
              },
              //坐标轴线样式
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed", //solid实线;dashed虚线
                  color: "rgba(36, 173, 254, 0.2)"
                }
              }
            }
          ],
          series: [
            {
              name: "考试人数",
              data: thirdIndustry,
              type: "line",
              smooth: true, //true曲线; false折线
              itemStyle: {
                normal: {
                  color: "#dc9bdb", //改变折线点的颜色
                  lineStyle: {
                    color: "#dc9bdb", //改变折线颜色
                    type: "solid"
                  }
                }
              },
              areaStyle: {
                //折线图颜色半透明
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(232, 241, 235, 0.5)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(250, 200, 228, 0.1)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            {
              name: "通过人数",
              data: totalStudent,
              type: "line",
              smooth: true, //true曲线; false折线
              itemStyle: {
                normal: {
                  color: "#6cdd84", //改变折线点的颜色
                  lineStyle: {
                    color: "#6cdd84", //改变折线颜色
                    type: "solid"
                  }
                }
              },
              areaStyle: {
                //折线图颜色半透明
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(232, 254, 237, 0.5)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(173, 251, 188, 0.1)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            }
          ]
        };

        this.chart = echarts.init(document.getElementById("examination"));
        this.chart.setOption(option);
        window.onresize = this.chart.resize();
      });
    }
  }
};
</script>
